import React from "react"
import { TouchableOpacity, Text, View, Image } from "react-native"
import { CalendarTouchableOpacityProps, ICalendarEventBase } from "react-native-big-calendar"
import { statusText, statusTextColor } from "app/constants/statusColor"
import { scale } from "react-native-size-matters"
import { icons } from "app/assets/icons"
import { colors } from "app/theme"

interface EventType extends ICalendarEventBase {
  status: string
  startHour: string
  booking?: boolean
}

export const RenderEvent = <T extends EventType>(
  event: T,
  touchableOpacityProps: CalendarTouchableOpacityProps,
) => {
  return (
    <TouchableOpacity {...touchableOpacityProps}>
      <View style={{ height: scale(70), alignSelf: "center" }}>
        <Text
          numberOfLines={3}
          style={{
            fontSize: scale(8),
            color: statusTextColor[event?.status],
            alignItems: "center",
          }}
        >
          {statusText[event?.status]}
        </Text>
        <Text style={{ color: statusTextColor[event?.status], fontSize: scale(8) }}>
          {event?.startHour}
        </Text>
      </View>
      <View style={{ alignSelf: "center" }}>
        {event?.booking ? (
          <Image style={{ height: scale(20), width: scale(20) }} source={icons.logo} />
        ) : (
          <View
            style={{
              height: scale(20),
              width: scale(20),
              borderRadius: scale(10),
              backgroundColor: colors.white,
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Image style={{ height: scale(15), width: scale(15) }} source={icons.building} />
          </View>
        )}
      </View>
    </TouchableOpacity>
  )
}
